Margins and Padding are important spacing concepts in UI/UX design that help designers create clean, balanced, readable, and consistent interfaces. In Figma, understanding the difference between outer spacing and inner spacing is essential when designing websites, mobile applications, dashboards, cards, forms, buttons, navigation bars, and responsive layouts.
These concepts are closely connected with Figma's alignment, spacing, Auto Layout, constraints, components, and responsive design workflows. JustAcademy's Figma training also covers spacing and layout principles, alignment, responsive design, Auto Layout, and practical UI/UX projects.
JustAcademy Figma Training | Register for Figma Course Demo
Margin refers to the space outside an element that separates it from other elements or from the boundaries of its parent/container. In UI design, margins create breathing room between different components and help establish visual hierarchy.
For example, if a card is placed inside a screen and there is 24px of space between the card and the screen edge, that outer space can be considered a margin or outer spacing.
Padding refers to the space inside an element between its content and its boundary. It creates internal breathing room so that text, icons, images, and other content do not touch the edges of the component.
For example, a button with 16px horizontal padding and 10px vertical padding provides space between its text and the button's edges.
| Property | Margin | Padding |
|---|---|---|
| Location | Outside an element | Inside an element |
| Purpose | Separates elements | Creates space around internal content |
| Example | Space between two cards | Space between card text and card border |
| Common Use | Section spacing and layout gaps | Buttons, cards, inputs and containers |
| Figma Relationship | Often represented through parent spacing, gaps, constraints or positioning | Commonly implemented through Auto Layout padding |
+------------------------------------------------+
| MARGIN / OUTER SPACE |
| +----------------------------------------+ |
| | PADDING | |
| | +------------------------------+ | |
| | | CONTENT | | |
| | +------------------------------+ | |
| | PADDING | |
| +----------------------------------------+ |
| MARGIN / OUTER SPACE |
+------------------------------------------------+
Good spacing improves readability, hierarchy, usability, consistency, and visual balance. Poor spacing can make an interface look crowded, confusing, or unprofessional.
Figma does not treat margin exactly like CSS. Instead, designers generally create outer spacing through frame positioning, Auto Layout spacing, gaps, constraints, layout guides, and parent-container relationships.
When working with Auto Layout, the space between a child and its parent boundary is normally controlled using padding, while the space between sibling elements is controlled using item spacing or gaps.
Padding is especially important when using Auto Layout. A parent frame can have padding values that determine the distance between its content and its boundaries.
Parent Frame
+--------------------------------------+
| Padding Top |
| |
| +-------------------------------+ |
| | Content | |
| +-------------------------------+ |
| |
| Padding Bottom |
+--------------------------------------+
Horizontal padding controls the space on the left and right sides of content inside a component.
+--------------------------------+
| 24px CONTENT 24px |
+--------------------------------+
For example, a button may use 20px or 24px horizontal padding to ensure that its label has sufficient space from the left and right edges.
Vertical padding controls the space above and below content inside a component.
+----------------------------+
| 12px |
| Button Text |
| 12px |
+----------------------------+
Vertical padding is commonly used for buttons, input fields, cards, navigation items, and list rows.
In an advanced layout, different padding values can be used for different sides.
| Side | Example | Purpose |
|---|---|---|
| Top | 16px | Space above content |
| Right | 24px | Space on the right |
| Bottom | 16px | Space below content |
| Left | 24px | Space on the left |
Auto Layout is one of the most useful Figma features for managing internal spacing. Instead of manually resizing a component whenever its content changes, Auto Layout can maintain padding and spacing automatically.
Auto Layout Button
+----------------------------------+
| 20px [ Continue ] 20px |
+----------------------------------+
↑ ↑
Padding Padding
When multiple elements are placed inside an Auto Layout frame, the spacing between those elements can be controlled using the spacing between items. This behaves similarly to the gap between elements in a CSS layout.
Card
+--------------------------------+
| Content |
| |
| Title |
| |
| 16px Gap |
| |
| Description |
| |
| 16px Gap |
| |
| Button |
+--------------------------------+
| Feature | Controls |
|---|---|
| Padding | Space between parent boundary and children |
| Gap / Item Spacing | Space between child elements |
| Margin-like outer spacing | Space between a component and its surrounding layout |
Consider a product card containing an image, title, description, price, and button. Padding keeps the content away from the card boundary while gaps create consistent spacing between the internal elements.
+------------------------------------+
| 24px Padding |
| |
| +----------------------------+ |
| | | |
| | Product Image | |
| | | |
| +----------------------------+ |
| |
| Product Name |
| |
| 12px Gap |
| |
| Product Description |
| |
| 16px Gap |
| |
| ₹1,499 |
| |
| 16px Gap |
| |
| [ Add to Cart ] |
| |
| 24px Padding |
+------------------------------------+
Buttons should generally have sufficient internal padding so the text is readable and the clickable area is comfortable. Instead of creating a fixed button width for every label, Auto Layout with padding allows the button to grow according to its content.
+--------------------------------+
| 20px Submit 20px |
+--------------------------------+
Horizontal Padding
| Button Type | Example Padding | Use Case |
|---|---|---|
| Small | 8px vertical / 12px horizontal | Compact controls |
| Medium | 10px vertical / 16px horizontal | Standard buttons |
| Large | 12px vertical / 24px horizontal | Primary actions |
These are design examples rather than mandatory Figma values. The correct values depend on the design system, typography, platform, and accessibility requirements.
Input fields require internal padding to prevent typed text, placeholder text, and icons from touching the border.
+--------------------------------------+
| 16px Enter your email address |
+--------------------------------------+
Input Padding
Navigation items often use horizontal and vertical padding to create a comfortable click or touch target while maintaining alignment.
+------------------------------------------------+
| Home | Products | Services | Contact |
+------------------------------------------------+
↑ ↑
Horizontal padding around navigation items
Card padding determines how close the internal content sits to the card boundary. Consistent card padding makes multiple cards appear organized and visually related.
When several cards appear in a list or grid, the space between cards acts as outer spacing. In Figma this can commonly be controlled using Auto Layout item spacing or a grid layout rather than manually positioning every card.
+------------------+ 24px +------------------+
| Card 1 | <--------> | Card 2 |
+------------------+ +------------------+
Large page sections require consistent vertical spacing. For example, a hero section may be separated from a feature section by a larger spacing value than the spacing between a heading and paragraph.
Hero Section
↓
64px Gap
↓
Features Section
↓
80px Gap
↓
Testimonials Section
Not every spacing value should be identical. Good UI design uses a hierarchy of spacing values to communicate relationships between elements.
| Relationship | Typical Approach |
|---|---|
| Icon and label | Small gap |
| Heading and paragraph | Small-to-medium gap |
| Content groups | Medium gap |
| Sections | Large gap |
A 4-point spacing system uses multiples of 4 as the foundation for spacing decisions.
4px
8px
12px
16px
20px
24px
28px
32px
40px
48px
64px
The purpose is not to force every design into these exact values but to create a consistent visual rhythm.
An 8-point spacing system uses multiples of 8 as common spacing values. It is widely used as a practical design-system approach for interfaces.
8px
16px
24px
32px
40px
48px
56px
64px
80px
96px
Margins and padding should adapt appropriately across mobile, tablet, and desktop layouts. A spacing value that works well on a large desktop screen may be too large for a small mobile screen.
| Device | Example Outer Spacing | Design Consideration |
|---|---|---|
| Mobile | 16px | Preserve limited screen width |
| Tablet | 24px | Provide additional breathing room |
| Desktop | 32px or more | Use wider layouts and containers |
Mobile:
Screen
| 16px | Content | 16px |
Tablet:
Screen
| 24px | Content | 24px |
Desktop:
Screen
| 32px+ | Content | 32px+ |
Container padding defines the internal distance between the container edge and its content. It is commonly used for website sections, dashboards, cards, modals, sidebars, and application screens.
+------------------------------------------+
| Container |
| |
| 32px |
| +--------------------------------+ |
| | Content | |
| +--------------------------------+ |
| |
+------------------------------------------+
Website designs often use a maximum content width together with horizontal outer spacing. This prevents content from becoming excessively wide on large screens.
Desktop Screen
+------------------------------------------------------+
| Outer Space |
| +----------------------------------------+ |
| | Main Content | |
| +----------------------------------------+ |
| Outer Space |
+------------------------------------------------------+
Do not confuse the width of a container with the spacing outside it. Container width controls how much space the container occupies, while outer spacing determines its relationship with surrounding content.
Frame: Card
Direction: Vertical
Padding: 24px
Gap: 16px
+--------------------------------+
| 24px |
| |
| Title |
| |
| 16px |
| |
| Description |
| |
| 16px |
| |
| Button |
| |
| 24px |
+--------------------------------+
| Type | Description |
|---|---|
| Fixed Padding | Uses a defined spacing value such as 16px or 24px |
| Responsive Padding | Changes according to screen size or layout requirements |
When an Auto Layout component uses a Hug contents sizing behavior, its dimensions can grow according to its content and padding. This is particularly useful for buttons, tags, badges, chips, and dynamic cards.
Short Label
+----------------+
| Save |
+----------------+
Long Label
+-----------------------------+
| Save Changes and Exit |
+-----------------------------+
Padding remains consistent while width adapts.
When a child element fills the available container space, the parent's padding defines the minimum distance between that child and the parent boundary.
Reusable components should have consistent internal padding. Examples include buttons, cards, alerts, navigation items, dropdowns, modal dialogs, form fields, and table rows.
Component padding should be defined as part of the component's design logic rather than manually adjusted every time the component is used.
Button Component
+----------------------------+
| Padding 16px |
| |
| Button Label |
| |
| Padding 16px |
+----------------------------+
Different component variants may use different padding values depending on size or purpose.
| Variant | Example |
|---|---|
| Small Button | Compact padding |
| Medium Button | Standard padding |
| Large Button | Generous padding |
| Icon Button | Balanced padding around icon |
Spacing around typography strongly affects readability. Headings, paragraphs, labels, captions, and supporting text should have intentional spacing relationships.
Heading
↓
16px
↓
Description
↓
24px
↓
Action
Multiple paragraphs should not appear as one dense block. Appropriate spacing between paragraphs improves scanning and comprehension.
A heading should generally be visually connected to the paragraph that follows it while still being separated enough to establish hierarchy.
Forms are highly dependent on spacing. Labels, input fields, helper text, error messages, and buttons should have predictable spacing relationships.
Label
↓
8px
↓
Input Field
↓
8px
↓
Helper Text
↓
24px
↓
Next Field
Input fields need sufficient internal padding to improve readability and usability. Icons inside fields should also have consistent spacing from the field boundary and text.
Modal dialogs usually require generous internal padding because they contain important information and actions.
+--------------------------------------+
| 32px |
| |
| Modal Title |
| |
| Description |
| |
| 24px |
| |
| [ Cancel ] [ Confirm ] |
| |
| 32px |
+--------------------------------------+
Sidebars require careful padding to maintain alignment between navigation items, icons, labels, headings, and profile sections.
Dashboard layouts commonly use outer page padding combined with card padding and consistent gaps between cards.
Dashboard
+------------------------------------------------+
| 32px |
| |
| +-------------+ 24px +-------------+ |
| | Card 1 | | Card 2 | |
| +-------------+ +-------------+ |
| |
| 24px |
| |
| +------------------------------------------+ |
| | Data Table | |
| +------------------------------------------+ |
| |
+------------------------------------------------+
Mobile interfaces often require consistent horizontal padding to prevent content from touching the screen edges while preserving usable screen width.
+----------------------------+
| 16px |
| +----------------------+ |
| | Mobile UI | |
| +----------------------+ |
| 16px |
+----------------------------+
Spacing should also account for touch targets, device edges, navigation areas, and content density. Avoid placing important interactive elements too close to the edge of a mobile screen.
E-commerce interfaces use spacing extensively in product cards, filters, product details, pricing sections, reviews, and checkout forms.
Landing pages use large section spacing to create a clear visual rhythm between hero sections, features, testimonials, pricing, FAQs, and footer content.
Navigation bars use horizontal padding around the navigation container and internal spacing between navigation items. Consistency is important for both visual alignment and usability.
A good card usually combines three spacing levels: outer spacing between cards, internal padding around card content, and smaller gaps between individual content elements.
Cards
Outer Gap: 24px
Card
Padding: 24px
↓
Title
Gap: 12px
↓
Description
Gap: 16px
↓
Action
Nested containers can have their own padding values. However, excessive nested padding can reduce the available content area and make layouts unnecessarily spacious.
Padding should support content rather than dominate it. Excessive padding can make cards unnecessarily tall, increase scrolling, and reduce information density.
Random spacing values can make an interface appear unstructured. Instead, use a defined spacing system and repeat values intentionally.
Margins and padding contribute to negative space, also known as white space. Negative space is not wasted space; it helps separate content, improve focus, and create visual hierarchy.
Larger spacing can indicate a stronger separation between content groups, while smaller spacing can indicate that two elements belong together.
Related Content
Title
↓ small gap
Description
New Content Group
↓ large gap
Next Section
If two similar components use different padding values without a clear reason, the interface may look inconsistent. Reusable components and design tokens help maintain consistency.
A design system can define reusable spacing tokens such as Space-4, Space-8, Space-12, Space-16, Space-24, and Space-32.
| Token | Value | Possible Usage |
|---|---|---|
| Space-4 | 4px | Very small icon/text spacing |
| Space-8 | 8px | Label and input relationships |
| Space-12 | 12px | Small component gaps |
| Space-16 | 16px | Standard spacing |
| Space-24 | 24px | Card and section spacing |
| Space-32 | 32px | Large container spacing |
Design tokens make spacing reusable across components. Instead of manually selecting random values, designers can define a small set of approved spacing values and apply them consistently.
In a design system, padding should be documented for major components. For example, a button system can define small, medium, and large sizes with their corresponding padding values.
Spacing contributes to accessibility by improving readability and helping users distinguish controls. Interactive elements should also provide sufficient usable area for touch and pointer interaction.
On mobile interfaces, controls should not be placed so close together that users can accidentally activate the wrong control. Adequate spacing and appropriately sized touch targets improve usability.
Icons should have consistent spacing from nearby labels. In an Auto Layout component, icon-to-text spacing can be controlled through item spacing rather than manual positioning.
[ Icon ] 8px LabelBadges and tags often use internal padding to create a compact but readable appearance.
+----------------------+
| 8px New 8px |
+----------------------+
Alert components typically use internal padding around the message and icon, while external spacing separates the alert from nearby content.
Tables require careful cell padding. Too little padding makes a table difficult to scan, while too much padding wastes space.
| Element | Spacing Consideration |
|---|---|
| Header | Enough padding for readability |
| Rows | Consistent vertical padding |
| Cells | Consistent horizontal spacing |
Lists require consistent spacing between list items and appropriate indentation between bullets or numbers and their text.
Images inside cards or containers may use padding depending on the intended design. Product images sometimes use an inset area while full-bleed images may intentionally touch the container edges.
| Approach | Description |
|---|---|
| Padded | Content stays inside the container with internal spacing |
| Full-Bleed | Content extends to the container edges |
Constraints control how layers respond when their parent frame changes size. Combining constraints with thoughtful spacing helps create responsive designs.
Layout guides can help establish consistent page boundaries and columns. Margins can be visually aligned with these guides to maintain a structured layout.
Grid systems provide a framework for aligning content. Outer margins, column widths, gutters, and internal padding work together to create consistent layouts.
When components are designed using Auto Layout and consistent padding, they can adapt more reliably to different content lengths and screen sizes.
Desktop:
Container Padding = 32px
Card Padding = 24px
Card Gap = 24px
Tablet:
Container Padding = 24px
Card Padding = 20px
Card Gap = 16px
Mobile:
Container Padding = 16px
Card Padding = 16px
Card Gap = 16px
+------------------------------------------------+
| 32px |
| Logo Navigation [ Sign In ] |
| 32px |
+------------------------------------------------+
The header can use container padding for the top, bottom, left, and right boundaries, while spacing between logo, navigation, and actions is controlled separately.
Login Card
+--------------------------------+
| 32px |
| Welcome Back |
| |
| 16px |
| Email |
| 8px |
| [ Email Input ] |
| |
| 16px |
| Password |
| 8px |
| [ Password Input ] |
| |
| 24px |
| [ Login ] |
| |
| 32px |
+--------------------------------+
Mobile Screen
+----------------------------+
| 16px |
| Header |
| |
| 24px |
| Main Content |
| |
| 16px |
| Card |
| |
| 24px |
| Action Button |
| |
| 16px |
+----------------------------+
Manually positioning every element makes spacing difficult to maintain. When appropriate, use Auto Layout, padding, item spacing, constraints, and components to create predictable relationships.
Using values such as 13px, 19px, 27px, 31px, and 43px without a design reason can create inconsistency. A spacing system makes the interface easier to manage.
Padding controls the distance between a container's boundary and its content. Gap or item spacing controls the distance between children. Understanding this distinction makes Auto Layout much easier to use.
Excessive internal padding can make components unnecessarily large. Always evaluate spacing in relation to content density and screen size.
Insufficient padding makes interfaces feel crowded and can reduce readability. Text and controls should have enough breathing room.
Create a responsive website in Figma with a header, hero section, feature cards, testimonials, pricing section, and footer. Define consistent page margins, section spacing, card padding, and button padding.
Create a mobile application containing a header, profile card, list items, form fields, buttons, and bottom navigation. Use a consistent horizontal page margin and component padding throughout the application.
Design an analytics dashboard with a sidebar, top navigation, statistics cards, charts, and tables. Apply page-level margins, card padding, grid gaps, and table cell spacing consistently.
Create a reusable product card component containing an image, product name, rating, price, discount information, and Add to Cart button. Use Auto Layout and padding so the component adapts to different product names.
Design a responsive login and registration screen. Use consistent spacing between labels and inputs, internal input padding, spacing between form groups, and appropriate outer margins.
Identify Container
↓
Define Outer Margin
↓
Create Auto Layout
↓
Set Container Padding
↓
Set Item Spacing
↓
Apply Component Styles
↓
Test Different Content
↓
Test Responsive Sizes
↓
Finalize Design
Margin is the space outside an element that separates it from surrounding elements or its parent boundaries. In Figma, this concept is usually achieved through parent layout spacing, positioning, constraints, or Auto Layout relationships rather than a CSS-style margin property.
Padding is the internal space between an element's boundary and its content. In Figma, padding is commonly controlled through Auto Layout.
Margin creates space outside an element, while padding creates space inside an element between its boundary and its content.
Apply Auto Layout to the parent frame and configure the padding values for the top, right, bottom, and left sides as required.
Use Auto Layout and set the spacing between items. This creates consistent gaps between sibling elements and avoids unnecessary manual positioning.
Auto Layout allows padding and spacing to remain consistent even when content changes. This makes components more flexible, reusable, and responsive.
No. Spacing should reflect relationships and hierarchy. Related elements can use smaller spacing, while separate content sections can use larger spacing.
A spacing system is a predefined set of reusable spacing values used throughout a design to maintain consistency and visual rhythm.
Spacing tokens provide standardized values that can be reused across components and screens, making a design system easier to maintain and scale.
Padding prevents content from touching component boundaries, improves readability, creates visual balance, and contributes to comfortable interaction areas.
Margins and outer spacing separate content groups. Larger spacing can communicate stronger separation, while smaller spacing can indicate related content.
Margins and padding are fundamental spacing concepts for professional UI design. Margin represents outer separation, while padding represents internal spacing. In Figma, Auto Layout provides a powerful way to manage padding and spacing dynamically, while constraints, grids, layout guides, components, and design systems help maintain consistent layouts.
A strong Figma designer does not simply add random empty space. Every spacing value should communicate a relationship, support hierarchy, improve readability, and contribute to a consistent design system.
Understanding margins and padding is essential for creating clean, responsive, scalable, and professional interfaces in Figma. By combining consistent spacing systems with Auto Layout, components, constraints, grids, and responsive design principles, designers can build interfaces that remain organized even when content, screen sizes, and requirements change.
To learn Figma UI/UX design through practical projects and structured training, explore JustAcademy Figma Training. You can also Register for Figma Course Demo to explore the training program.
